<template>
    <div id="all">
        <nav>
            <input type="text" 
                placeholder="请输入商品类型"
                v-model="keyWord"
                @input="wordChange"
            >
            <span class="fa fa-search"></span>
            <router-link to="/second/ShoppingCar">
                <span class="fa fa-shopping-cart"></span>
            </router-link>
        </nav>
        <div id="box">
            <div id="list">
                <p @touchstart="select(s)" v-for="s in arr">{{s}}</p>
            </div>
            <div id="item">
                <div class="each" v-for="l in list">
                    <router-link :to="'/Kind/GoodList/'+l.name">
                        <img :src="l.picture[1]">
                        <p>{{l.name}}</p>
                    </router-link>
                </div>
            </div>
        </div>
        <div id="search" v-show="searchResult.length>0">
            <div v-for="r in searchResult">
                <router-link :to="'/Kind/GoodList/'+r.name">
                <p>{{r.name}}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
import ScrollView from '@/components/ScrollView.vue'
export default{
    data:function(){
        return{
            arr:["手机/配件","电脑/周边","数码产品","居家生活","服饰","鞋履","食品/保健品","珠宝饰品","其他","美容美体","文体用品","箱包","母婴用品","摄影摄像"],
            list:[],
            keyWord:"",
            searchResult:[],
            timer:null
        }
    },
    components:{
        Tabbar,
        ScrollView
    },
    mounted:function(){
        var a = "手机/配件";
        this.select(a);
    },
    methods:{
        select:function(e){
            this.$store.dispatch("requestItem",{e:e})
            .then(res=>{
                this.list = res.data.msg;
            })
        },
        wordChange:function(){
            var params = {
                word:this.keyWord
            }
            if(this.timer){
                clearTimeout(this.timer);
                this.timer = null;
            }
            this.timer =setTimeout(function(){
                if(this.keyWord){
                    this.$store.dispatch("requestGoodSearch",params)
                    .then(res=>{
                        this.searchResult = res.data.msg;
                    })
                }else{
                    this.searchResult = [];
                }
                this.timer = null;
            }.bind(this),700);
        }
    }
}
</script>

<style scoped>
    #all{
        position: relative;
        background-color: #eee;
        height: 100vh;
        width: 100vw;
    }
    nav{
        height: 38px;
        padding: 5px 8px; 
        border-bottom: 1px solid #bbb;
    }
    nav input{
        width: 88%;
        height: 25px;
        padding-left: 23px;
        background-color: #999;
        border-radius: 5px;
    }
    a{
        text-decoration: none;
        color: black;
    }
    .fa-search{
        position: absolute;
        left: 15px;
        top: 10px;
        font-size: 14px;
    }
    .fa-shopping-cart{
        margin-left: 6px;
        font-size: 20px;
        color: #666;
    }
    #box{
        height: calc(100vh - 43px - 37px);
        overflow-y: scroll;
        display: flex;
    }
    #list{
        width: 80px;
        height: calc(100vh );
        
    }
    #list p{
        margin: 0;
        padding-left: 4px;
        border-bottom: 1px solid #ddd;
        width: 80px;
        font-size: 13px;
        height: 45px;
        line-height: 45px;
        background-color: white;
    }
    #item{
        height: 200px;
        margin-left: 6px;
        margin-top: 6px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .each{
        text-align: center;
        width: 75px;
        height: 85px;
        margin-left: 6px;
        background-color: white;
    }
    .each img{
        width: 60px;
        height: 60px;
    }
    .each p{
        margin: 0;
        font-size: 12px;
    }
    #search{
        position: absolute;
        left: 0;
        top: 40px;
        background-color: white;
        width: 100%;
        padding-left: 8px;
    }
    #search p{
        margin: 0;
        border-bottom: 1px solid #bbb;
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }
</style>